<template>
  <div class="bottom-bar">
    <div class="left">
      <CheckButton :checkd="ifAllCheckd" @click.native="clickAllCheck" />
      <span style="padding-left: 5px">全选</span>
    </div>
    <div class="middle">合计:￥{{ totalPrice }}</div>
    <div class="right">去结算({{checkdCartLength}})</div>
  </div>
</template>

<script>
import CheckButton from "./CheckButton";
export default {
  data() {
    return {
      // checkd: true,
    };
  },
  props: ["totalPrice", "ifAllCheckd","checkdCartLength"],
  components: {
    CheckButton,
  },
  created() {},
  methods: {
    clickAllCheck() {
      // this.checkd = !this.checkd;
      this.$emit("clickAllCheck");
    },
  },
};
</script>

<style lang='less' scoped>
.bottom-bar {
  position: fixed;
  bottom: 49px;
  width: 100%;
  height: 40px;
  // line-height: 40px;
  background: pink;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .left {
    display: flex;
    flex: 1;
    // align-items: center;
    justify-content: center;
  }

  .middle {
    flex: 1.5;
    display: flex;
    // justify-content: center;
  }

  .right {
    background: rgb(255, 96, 4);
    color: white;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
}
</style>
